<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>商品详情</title>
    <script src="js/jquery-3.1.0.js" charset="utf-8"></script>
    <script src="js/jzoom.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="css/header.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="css/content.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="css/footer.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="css/show.css" media="screen" title="no title">
  </head>
  <body>
    <div class="header">
        <div class="head">
            <ul class="firstHead">
                <li><a href="index.html" target="_blank">波奇首页</a></li>
                <li><a href="shop.html" target="_blank">波奇商城</a></li>
                <li><a href="serve.html" target="_blank">波奇服务</a></li>
                <li><a href="message.html" target="_blank">波奇论坛</a></li>
                <li><a href="cyclopedia.html" target="_blank">宠物百科</a></li>
            </ul>
            <ul class="attention">
                <li><a href="#">关注我们<span><img src="" alt="" /></span></a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#"><span><img src="" alt="" /></span>收藏</a></li>
            </ul>
            <ul class="register">
                <li><a href="login.html" target="_blank">登陆</a></li>
                <li><a href="script:;">|</a></li>
                <li><a href="register.html" target="_blank">免费注册</a></li>
            </ul>
            <ul class="userLogin">
                <li>
                    <a href="script:;" id="userName"></a>
                </li>
                <li>|</li>
                <li><a href="script:;" id="quit">退出</a></li>
            </ul>

        </div>
    </div>
    <div class="navigation">
        <div class="logo">
            <img src="source/images/logo.png" alt="" />
        </div>
        <div class="serch">
          <input type="text" id="keyword"name="name" value="" placeholder="请输入关键字">
          <img id="search"src="source/images/ind_sch.png" alt="" />
        </div>
        <div class="app">
            <a href="#"><img src="source/images/app.jpeg" alt="" /></a>
        </div>
    </div>
    <div class="top_nav">
        <div class="nav_wrap">
            <div class="nav_left">
                <a href="script:;"><span>全部商品分类</span></a>
                <a href="script:;"><em></em></a>
            </div>
            <div class="nav_middle">
                <a href="shop.html" class="homePage">首页</a>
                <a href="shop.html#dog">狗狗</a>
                <a href="shop.html#cat">猫猫</a>
                <a href="shop.html#spet">小宠</a>
                <a href="shop.html#fish">水族</a>
                <a href="shop.html#reptile">爬虫</a>
                <a href="serve.html" target="_blank">波奇服务</a>
            </div>
            <div class="nav_right">
                <div class="shop_right" id = "shoplist">
                    <div class="shop_text">
                        <em></em>
                        <a href="script:;">购物车</a>
                    </div>
                    <span></span>
                </div>

            </div>
        </div>
    </div>
    <div class="show">
      <div class="goodsimg">
        <div id="zoom">
          <img id="imgmin"src="" alt="" />
        </div>
        <img id = 'img1' class="img" src="" alt="" />
        <img id = 'img2' class="img" src="" alt="" />
        <img id = 'img3' class="img" src="" alt="" />
        <img id = 'img4' class="img" src="" alt="" />
      </div>
      <div class="goodsInfo">
        <h1 class="title" id="name"></h1>
        <div class="describe"></div>
        <div class="price">
          <div class="markprice">
            <span class="mp">市场价：</span>
            <del class="mpnum"></del>
          </div>
          <div class="thisprice">
            <span class="tp">萌宠价：</span>
            <span class="tpnum"></span>
          </div>
        </div>
         <!--其他公益计划提示-->
          <!--促销活动提示-->



        <div class="send-city">
          <span class="">送货至：</span>
          <input id="address" type="text" name="address" value="" placeholder="您的详细送货地址">
        </div>

          <!--规格-->
                  <!--数量-->
        <div class="buy">
          <span class="buyword">我要买：</span>
          <span class="buynumbox">
            <a href="#"><span class="sub" onclick="sub()">-</span></a>
            <input type="text" onchange="rules()" id="buynum" class="text buynum" style="float:none;color:black"value="1" size="2">
            <a href="#"><span class="add" onclick="add()">+</span></a>
          </span>
          <span class="unit">个</span>
        </div>

          <!--发货信息-->
        <div class="send">
          <div class="sendmessage">萌宠快递15点前下单，其他快递16点前下单，当天发货。
            <a href="script:;" target="_blank">运费详情&gt;&gt;</a>
          </div>
        </div>


        <a class="addsplist" href="#">
          <span class="splistword">加入购物车</span>
        </a>
        <div class="message">
          <div class="ats-style mt5">
            <a href="script:;" style="text-decoration:none;color:black">留言咨询</a>
          </div>
        </div>
      </div>
      <div class="ensure">
          <div class="ensure_img">
              <img src="source/images/ensure.png" alt="" />
          </div>
      </div>
    </div>
    <div class="footer">
        <ul>
            <li><a href="#">关于我们</a></li>|
            <li><a href="#">友情链接</a></li>|
            <li><a href="#">诚聘英才</a></li>|
            <li><a href="#">联系我们</a></li>|
            <li><a href="#">网站地图</a></li>|
            <li><a href="#">意见反馈</a></li>|
            <li><a href="#">帮助中心</a></li>|
            <li><a href="#">客服热线：123456789</a></li>
        </ul>
        <p>
            Copyright © 2007-2016 Boqii.com All Rights Reserved 光橙（上海）信息科技有限公司 版权所有 沪ICP备13034501号-2 增值电信业务经营许可证：沪B2-20140120
        </p>
    </div>
  </body>

</html>
<script type="text/javascript">
// 用户信息缓存处理

var register = document.getElementsByClassName("register")[0];
var userLogin =document.getElementsByClassName("userLogin")[0];
var userName = document.getElementById("userName");
var quit = document.getElementById("quit");
window.ready = readStorage();
setInterval(readStorage,2000);
//读取storage的数据
function readStorage(){
  console.log(111);
  var storage = window.localStorage;
  if (typeof(storage["user"])=='undefined') {
    register.style.display ="inline-block";
    userLogin.style.display = "none";
     return false;
  }else if(storage["user"]==""){
    register.style.display ="inline-block";
    userLogin.style.display = "none";
     return false;
  }else {
    var myDate =  new Date();
    var currenTime = myDate.getTime();
    if (currenTime >= Number(storage["userTime"])+3600000) {
      storage["user"] =="";
    }else {
        register.style.display ="none";
        userLogin.style.display = "inline-block";
        userName.innerText = storage["user"];
    }

  }
}

quit.onclick = function (){
  var storage = window.localStorage;
  register.style.display ="inline-block";
  userLogin.style.display = "none";
  storage["user"] = "";
}


//主页传参设置
// var a1=document.getElementById("a1");
//        var age = 18;
//        a1.href=a1.href+"?"+age;

// 跳转后得到参数
var imgid=window.location.search.slice(window.location.search.lastIndexOf("?")+1);
  //  console.log(getInfo);
 // var imgid='0049';
// 读取缓存用户信息


  var XMLHttp
  if (window.ActiveXObject) {
    XMLHttp = new ActiveXObject('Microsoft.XMLHTTP');
  }else{
    XMLHttp = new XMLHttpRequest();
  }
    var url = "php/show.php?id="+imgid;
    console.log(url);
  XMLHttp.open('get',url,true);
  XMLHttp.send(null);
  XMLHttp.onreadystatechange = function () {
    if (XMLHttp.readyState == 4) {
      if (XMLHttp.status == 200) {
        obj = JSON.parse(XMLHttp.response);
        console.log(obj.name);
        var name = document.getElementById("name");
        name.innerHTML = obj.name;
        var describe = document.getElementsByClassName("describe")[0];
        describe.innerHTML = obj.describe;
        var mpnum = document.getElementsByClassName("mpnum")[0];
        mpnum.innerHTML = "¥"+obj.markprice;
        var tpnum = document.getElementsByClassName("tpnum")[0];
        tpnum.innerHTML = "¥"+obj.thisprice;
        var imgmin = document.getElementById('imgmin');
        imgmin.src = obj.imgurl1;
        var img1 = document.getElementById("img1");
        img1.src = obj.imgurl1;
        var img2 = document.getElementById("img2");
        img2.src = obj.imgurl2;
        var img3 = document.getElementById("img3");
        img3.src = obj.imgurl3;
        var img4 = document.getElementById("img4");
        img4.src = obj.imgurl4;
        $('#zoom').jzoom({
        // 放大展示视窗大小
          width:400,
          height:300,
          opacity:0.5,
          //放大后的图片显示在什么位置
          position:'right',
          //便宜量
          offsetX: 200,
          offsetY: 60,
          suffixName:'big',
        })
      }
    }
  }
  // 图片选择

  var img = document.getElementsByClassName('img');
  for (var i = 0; i < img.length; i++) {
    img[i].onclick=function (event) {
      event = event || window.event;
      // console.log(event);
      // zoom.innerHTML = '<img id="imgmin" src="'+event.target.src+'" alt="" />';
      imgmin.src = event.target.src;
      $('#zoom').jzoom({
      // 放大展示视窗大小
        width:400,
        height:300,
        //放大后的图片显示在什么位置
        position:'right',
        //便宜量
        offsetX: 200,
        offsetY: 60,
        suffixName:'big',
      })
      for (var j = 0; j < img.length; j++) {
        img[j].style.border = '2px solid white'
      }
      event.target.style.border = '2px solid green';
    }
  }
  var buynum = document.getElementById("buynum");
//购买数量加减函数
  function sub() {
    var count = Number(buynum.value);
    count--;
    if (count<1) {
      count = 1;
    }
    buynum.value = count;
  }
  function add() {
    var count = Number(buynum.value);
    count++;
    buynum.value = count;
  }
//购买数量填写正泽
  function rules() {
    var regExp = /[^\d]|^0*/g;
    buynum.value = buynum.value.replace(regExp,'');
    if (!buynum.value) {
      buynum.value = 1;
    }
  }
var addsplist = document.getElementsByClassName("addsplist")[0];
addsplist.onclick = function () {
  var storage = window.localStorage;
  var user= storage.user;
  var count = Number(buynum.value);
  var address = document.getElementById('address').value;
  console.log(address);
  if (!address) {
    alert("必须填写送货地址");
  }else if(!user){
    window.open('login.html');
  }else{


  var url = "php/addlist.php?id="+imgid+"&count="+count+"&username="+user+"&address="+address;
  console.log(url);
    XMLHttp.open('get',url,true);
    XMLHttp.send(null);
    XMLHttp.onreadystatechange = function () {
      if (XMLHttp.readyState == 4) {
        if (XMLHttp.status == 200) {
          console.log(XMLHttp.response);
          // if
          var messagebox = document.createElement('div');
          messagebox.id = "messagebox";
          messagebox.innerHTML = '<p style="height:30px;line-height:30px;background-color:gray;text-align:left;">提示：</p><p style="margin:10px 0px";>已成功加入购物车</p><input type="button" name="name" onclick="Remove()" id="btn" value="确定">';
          document.body.appendChild(messagebox);
        }
      }
    }
  }
}
function Remove() {
  var btn = document.getElementById("btn");
  btn.parentNode.remove();
}
var shoplist = document.getElementById("shoplist");
shoplist.onclick = function () {
  window.open('list.html');
}
var search = document.getElementById("search");
keyword = document.getElementById("keyword");
search.onclick = function () {
  if (!keyword.value) {
    keyword.focus();
  }else{
    window.open('wares.html?'+keyword.value);
  }
}
</script>
